import React, { memo } from 'react';
import { Card, Dropdown, Typography, Tag, Space, Tooltip } from 'antd';
import type { MenuProps } from 'antd';
import {
  FolderOutlined,
  MoreOutlined,
  EditOutlined,
  DeleteOutlined,
  CopyOutlined,
  FileTextOutlined,
  ClockCircleOutlined,
} from '@ant-design/icons';
import type { Project } from '@/types/project';
import { formatDistanceToNow } from 'date-fns';
import { zhCN } from 'date-fns/locale';
import './style.css';

const { Text, Paragraph } = Typography;

interface ProjectCardProps {
  project: Project;
  onClick?: (project: Project) => void;
  onEdit?: (project: Project) => void;
  onDelete?: (project: Project) => void;
  onDuplicate?: (project: Project) => void;
  draggable?: boolean;
  isDragging?: boolean;
}

export const ProjectCard = memo<ProjectCardProps>(({
  project,
  onClick,
  onEdit,
  onDelete,
  onDuplicate,
  draggable = false,
  isDragging = false,
}) => {
  const menuItems: MenuProps['items'] = [
    {
      key: 'edit',
      label: '编辑',
      icon: <EditOutlined />,
      onClick: (e) => {
        e.domEvent.stopPropagation();
        onEdit?.(project);
      },
    },
    {
      key: 'duplicate',
      label: '复制',
      icon: <CopyOutlined />,
      onClick: (e) => {
        e.domEvent.stopPropagation();
        onDuplicate?.(project);
      },
    },
    {
      type: 'divider',
    },
    {
      key: 'delete',
      label: '删除',
      icon: <DeleteOutlined />,
      danger: true,
      onClick: (e) => {
        e.domEvent.stopPropagation();
        onDelete?.(project);
      },
    },
  ];

  const handleCardClick = () => {
    if (!isDragging) {
      onClick?.(project);
    }
  };

  const handleMenuClick: MenuProps['onClick'] = (e) => {
    e.domEvent.stopPropagation();
  };

  const projectColor = project.color || '#1890ff';

  return (
    <Card
      hoverable
      className={`project-card ${isDragging ? 'dragging' : ''}`}
      onClick={handleCardClick}
      style={{
        borderTop: `4px solid ${projectColor}`,
      }}
      styles={{
        body: {
          padding: '16px',
        },
      }}
      extra={
        <Dropdown
          menu={{ items: menuItems, onClick: handleMenuClick }}
          trigger={['click']}
          placement="bottomRight"
        >
          <MoreOutlined
            className="project-card-menu"
            onClick={(e) => e.stopPropagation()}
          />
        </Dropdown>
      }
    >
      <div className="project-card-content">
        {/* 项目图标和名称 */}
        <div className="project-card-header">
          <div className="project-icon" style={{ color: projectColor }}>
            <FolderOutlined className="text-3xl" />
          </div>
          <div className="project-info">
            <Tooltip title={project.name}>
              <h3 className="project-name">{project.name}</h3>
            </Tooltip>
            {project.description && (
              <Paragraph
                ellipsis={{ rows: 2 }}
                className="project-description"
                style={{ marginBottom: 0 }}
              >
                {project.description}
              </Paragraph>
            )}
          </div>
        </div>

        {/* 统计信息 */}
        <div className="project-stats">
          <Space size="large">
            <Tooltip title="文章数">
              <Space size={4}>
                <FileTextOutlined className="text-gray-400" />
                <Text type="secondary">{project.articleCount || 0}</Text>
              </Space>
            </Tooltip>
            <Tooltip title="总字数">
              <Space size={4}>
                <Text type="secondary" className="text-xs">
                  {project.wordCount?.toLocaleString() || 0} 字
                </Text>
              </Space>
            </Tooltip>
          </Space>
        </div>

        {/* 底部信息 */}
        <div className="project-footer">
          <Space size={8}>
            {project.settings?.aiModel && (
              <Tag color="blue" className="text-xs">
                {project.settings.aiModel}
              </Tag>
            )}
            {project.settings?.language && (
              <Tag className="text-xs">
                {project.settings.language === 'zh' ? '中文' : 'English'}
              </Tag>
            )}
          </Space>

          <Tooltip title={new Date(project.updatedAt).toLocaleString('zh-CN')}>
            <Space size={4} className="project-time">
              <ClockCircleOutlined className="text-gray-400 text-xs" />
              <Text type="secondary" className="text-xs">
                {formatDistanceToNow(new Date(project.updatedAt), {
                  addSuffix: true,
                  locale: zhCN,
                })}
              </Text>
            </Space>
          </Tooltip>
        </div>
      </div>
    </Card>
  );
});

ProjectCard.displayName = 'ProjectCard';
